<template>
  <div>
    <h1 style="font-size: 30px">推荐</h1>
    <h2 style="margin-bottom: 20px">Hi! {{ nickname }}.今日为你推荐</h2>
    <!-- 四个主页菜单布局 -->
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <div class="demo-image__placeholder">
            <div class="block">
              <h3 class="demonstration">每日推荐</h3>
              <el-image :src="src"></el-image>
            </div>
          </div></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <div class="demo-image__placeholder">
            <div class="block">
              <h3 class="demonstration">推荐歌单</h3>
              <el-image :src="src"></el-image>
            </div>
          </div></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <div class="demo-image__placeholder">
            <h3 class="demonstration">推荐歌曲</h3>
            <el-image :src="src"></el-image>
          </div></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <div class="demo-image">
            <h3 class="demonstration">推荐新音乐</h3>
            <el-image :src="src"></el-image>
          </div></div
      ></el-col>
    </el-row>
    <!-- 私人歌单推荐 -->
    <h2 style="margin-bottom: 20px">您的私荐歌单</h2>
    <el-row :gutter="20">
      <el-col
        :lg="4"
        :span="6"
        v-for="obj in recommend"
        :key="obj.id"
        style="margin-bottom: 30px"
        ><div class="grid-content bg-purple">
          <el-image style="width: 100%" :src="obj.picUrl" fit="cover"
            >></el-image
          >
          <span class="songname">{{ obj.name }}</span>
        </div></el-col
      >
    </el-row>
    <!-- 今日推荐歌单 -->
    <h2 style="margin-bottom: 20px">今日为你推荐歌单</h2>
    <el-row :gutter="25">
      <el-col
        :lg="4"
        :span="6"
        v-for="obj in resultday"
        :key="obj.id"
        style="margin-bottom: 30px"
        ><div class="grid-content bg-purple">
          <el-image style="width: 100%" :src="obj.picUrl" fit="cover"
            >></el-image
          >
          <span class="songname">{{ obj.name }}</span>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nickname: '',
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      recommend: [],
      resultday: []
    }
  },
  async created () {
    this.nickname = window.sessionStorage.getItem('nickname')
    // 请求私荐歌单
    const { data: result } = await this.$axios({
      url: `/recommend/resource?cookie=${window.sessionStorage.getItem(
        'cookie'
      )}`
    })
    if (result.code !== 200) {
      console.log(this.$msg.error(result.msg))
    } else {
      this.recommend = result.recommend
    }
    // 请求每日推荐歌单
    const { data: res } = await this.$axios({
      url: '/personalized?limit=12'
    })
    if (res.code !== 200) {
      console.log(this.$msg.error(res.msg))
    } else {
      this.resultday = res.result
    }
  }
}
</script>

<style scoped>
html,
body {
  color: aqua;
}
h1,
h2 {
  color: aliceblue;
}
h3 {
  text-align: center;
  margin-bottom: 8px;
}
.grid-content {
  border-radius: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
}
.songname {
  /* white-space: nowrap; */
  overflow: hidden;
  display: inline-block;
  height: 44px;
}
</style>
